<!--
 * @Author: your name
 * @Date: 2021-10-19 15:12:58
 * @LastEditTime: 2021-10-22 22:09:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\Home\message..vue
-->
<template>
  <div class="app">
    <router-link to="/grabble">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="资格证书"
      >
        <template #action>
          <div class="r-icon">
            <img src="../../assets/img/play-img/liebiao.png" alt="" />
          </div>
        </template>
        <template #right-icon>
          <div @click="onSearch">
            <img src="../../assets/img/play-img/sousuo.png" alt="" />
          </div>
        </template>
      </van-search>
    </router-link>
    <div class="pp">
      <van-tabs :active="active">
        <van-tab title="等级证书">
          <div class="swiper">
            <img src="../../assets/img/play-img/zixun1.png" alt="" />
          </div>
          <div class="zixun">
            <div class="bt">
              <p class="blod">BEC剑桥商务英语</p>
              <p class="more">更多</p>
            </div>
            <p class="duanluo">
              Business English Certificate
              剑桥商务英语根本目的不在考试，而是对非英语国家国际型公司对员工的英语能力评定，而根据成绩的偏向（听说读写四个方面）来考察员工是否合适即将参与的工作岗位。但由于近几年许多外企在国内的设立，对应聘员工的要求也越来越专业，因此BEC证书也就成了外企认证的唯一标准。但是企业更看重的是英语的应用能力，许多拿有BEC证书的应聘者被拒之门外，原因也就是成绩很高却不会临场应用。
            </p>
          </div>
          <div class="bangdan">
            <div class="bt">
              <p class="blod">热门榜单</p>
              <p class="more">更多</p>
            </div>
            <div>
              <ul>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书04.png"
                    alt=""
                  />
                  <p>人力资源管理</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书05.png"
                    alt=""
                  />
                  <p>物流师</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书06.png"
                    alt=""
                  />
                  <p>高级电工将</p>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="职业证书">
          <div class="swiper">
            <img src="../../assets/img/play-img/zixun1.png" alt="" />
          </div>
          <div class="zixun">
            <div class="bt">
              <p class="blod">BEC剑桥商务英语</p>
              <p class="more">更多</p>
            </div>
            <p class="duanluo">
              Business English Certificate
              剑桥商务英语根本目的不在考试，而是对非英语国家国际型公司对员工的英语能力评定，而根据成绩的偏向（听说读写四个方面）来考察员工是否合适即将参与的工作岗位。但由于近几年许多外企在国内的设立，对应聘员工的要求也越来越专业，因此BEC证书也就成了外企认证的唯一标准。但是企业更看重的是英语的应用能力，许多拿有BEC证书的应聘者被拒之门外，原因也就是成绩很高却不会临场应用。
            </p>
          </div>
          <div class="bangdan">
            <div class="bt">
              <p class="blod">热门榜单</p>
              <p class="more">更多</p>
            </div>
            <div>
              <ul>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书04.png"
                    alt=""
                  />
                  <p>人力资源管理</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书05.png"
                    alt=""
                  />
                  <p>物流师</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书06.png"
                    alt=""
                  />
                  <p>高级电工将</p>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="校园资讯">
          <div class="swiper">
            <img src="../../assets/img/play-img/zixun1.png" alt="" />
          </div>
          <div class="zixun">
            <div class="bt">
              <p class="blod">BEC剑桥商务英语</p>
              <p class="more">更多</p>
            </div>
            <p class="duanluo">
              Business English Certificate
              剑桥商务英语根本目的不在考试，而是对非英语国家国际型公司对员工的英语能力评定，而根据成绩的偏向（听说读写四个方面）来考察员工是否合适即将参与的工作岗位。但由于近几年许多外企在国内的设立，对应聘员工的要求也越来越专业，因此BEC证书也就成了外企认证的唯一标准。但是企业更看重的是英语的应用能力，许多拿有BEC证书的应聘者被拒之门外，原因也就是成绩很高却不会临场应用。
            </p>
          </div>
          <div class="bangdan">
            <div class="bt">
              <p class="blod">热门榜单</p>
              <p class="more">更多</p>
            </div>
            <div>
              <ul>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书04.png"
                    alt=""
                  />
                  <p>人力资源管理</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书05.png"
                    alt=""
                  />
                  <p>物流师</p>
                </li>
                <li>
                  <img
                    src="../../assets/img/play-img/补充03-学习电子书06.png"
                    alt=""
                  />
                  <p>高级电工将</p>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="岗位资讯">内容 4</van-tab>
        <van-tab title="学历晋升">内容 4</van-tab>
        <van-tab title="学历晋升">内容 4</van-tab>
        <van-tab title="学历晋升">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Search } from "vant";
import { ref } from "vue";
import { Tab, Tabs } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value = ref("");
    const active = ref(0);
    const router = useRouter();
    const goSearch = () => {
      router.push("/grabble");
    };
    return {
      value,
      active,
      goSearch,
    };
  },
  components: {
    VanSearch: Search,
    VanTabs: Tabs,
    VanTab: Tab,
  },

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.van-search {
  background-color: #fff;
  width: 100%;
}
/deep/.van-tabs__line {
  background-color: #4ab8fa;
  bottom: 20px;
}
/deep/.van-search__content {
  background-color: #ededed;
}
/deep/ .van-field__right-icon {
  margin-right: 2px;
  height: 18px;
  img {
    width: 15px;
    height: 15px;
  }
}
/deep/ .van-search__action {
  .r-icon {
    height: 26px;
  }
}
/deep/i::before {
  display: none;
}
/deep/.van-tabs__line {
  background-color: #4ab8fa;
  width: 15%;
}
/deep/.van-tab--active {
  color: #4ab8fa;
}
/deep/i::before {
  display: none;
}
.swiper {
  img {
    width: 100%;
    height: 233px;
  }
}
.zixun {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  .bt {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    .blod {
      font-weight: bold;
    }
    .more {
      font-size: 11px;
    }
  }
}
.duanluo {
  font-size: 14px;
  color: #323232;
  line-height: 20px;
}
.bangdan {
  width: 95%;
  margin: auto;
  .bt {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    .blod {
      font-weight: bold;
    }
    .more {
      font-size: 11px;
    }
  }

  ul {
    width: 100%;
    display: flex;
    padding: 10px 0 70px 0;
    font-size: 14px;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 158px;
      height: 140px;
      img {
        width: 100px;
        height: 140px;
      }
      p {
        padding: 5px 0 0 0;
      }
    }
  }
}
</style>
